<template>
    <Carousel        
         v-model="value3"
        :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :height="setting.height"
        :radius-dot="setting.radiusDot"
        :trigger="setting.trigger"
        :arrow="setting.arrow">
        <CarouselItem v-for="item in carousel">
            <div class="demo-carousel" >
                <a :style="{backgroundImage:'url('+item.url+')', height:height+'px', display:'block', cursor:'pointer'}" class="bg" :href="item.urls"></a>
            </div>
        </CarouselItem>

    </Carousel>
</template>
<script>
    export default {
        props:{
            carouselImgs: {
                type: Array
            },
            height:{
                type:Number
            }
        },
        data () {
            return {
                value3:0,
                setting: {
                    autoplay: true,
                    height:this.height,
                    autoplaySpeed: 2000,
                    dots: 'inside',
                    radiusDot: false,
                    trigger: 'click',
                    arrow: 'hover'
                },
                default: {
                    topImgs: [
                        {
                            url:require('../../images/banner_1-ec70a4.jpg'),
                            urls:'#'
                        },
                        {
                            url:require('../../images/banner_ac2017-47729f.jpg'),
                            urls:'#'
                        },
                        {
                            url:require('../../images/banner_1-ec70a4.jpg'),
                            urls:'#'
                        },
                    ],
                    AdImgs: [
                        {
                            url:require('../../images/f8bd36be-0682-49be-8a4f-a100f5089d1f.jpg'),
                            urls:'#'
                        },
                        {
                            url:require('../../images/81eacc65-57f0-4ae6-b48e-3a60a23cc7e9.jpg'),
                            urls:'#'
                        }
                    ],
                },
            }
        },
        computed:{
            carousel(){
                var carousel = [];
                if(this.carouselImgs.length == 0){ carousel = this.default.AdImgs;}
                else{
                    for(var i = 0; i < this.carouselImgs.length; i++){
                        for(var j = 0; j < this.carouselImgs[i].logo.length;j++){       
                            var urls ={urls: this.carouselImgs[i].url};
                            var obj = Object.assign({},this.carouselImgs[i].logo[j],urls); 
                            carousel.push(obj);
                        }
                    }
                }
                return carousel;
            }
        }
    }
</script>
<style scoped>
.bg{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
</style>